<template>
  <gui-page>
    <template v-slot:gBody>
      <!-- 轮播图  -->
      <view>
        <gui-swiper :swiperItems="swiperItems" :spacing="0" :padding="0" borderRadius="0rpx" :width="750" :height="330">
        </gui-swiper>
      </view>
      <!-- 商品标题 分享按钮 -->
      <view
        class="gui-padding gui-flex gui-row gui-space-between gui-align-items-center gui-bg-white gui-dark-bg-level-3">
        <text class="gui-h5 gui-block product-name gui-block">菏泽大席小王子</text>
        <view class="product-share" @tap="share">
          <!-- 分享icon -->
          <!-- <text class="product-share gui-icons gui-color-orange">&#xe622;</text> -->
        </view>
      </view>
      icon
      <view class="gui-padding gui-bg-white">
        <text class=" gui-h6  gui-color-gray ">{{product.contont}}</text>
      </view>

      <view class="gui-padding gui-bg-white">
        <rich-text :nodes="product.description"></rich-text>
        <!-- <text class=" gui-h6  gui-color-gray "></text> -->
      </view>


      <!-- 详情 请根据项目情况自行改进 可以使用 富文本-->
      <!-- <view class="gui-padding" v-if="active == 0">
				<image style="width:690rpx;" :src="item" mode="widthFix" v-for="(item,index) in product.imgs"
					:key="index"></image>
			</view> -->

      <!-- 底部 -->
      <view class="product-footer gui-bg-white gui-dark-bg-level-3 gui-border-t gui-bg-gray">
        <!-- 属性选择 -->
        <scroll-view class="product-attr" :scroll-y="true" v-if="attrShow">
          <view class="gui-flex gui-row gui-space-between">
            <text class="gui-text gui-color-gray">选择颜色</text>
            <text class="gui-color-gray gui-h5 gui-icons" @tap="closeAttr">&#xe632;</text>
          </view>
          <view class="gui-margin-top">
            <gui-stags :tags="colors" @change="colorChange"></gui-stags>
          </view>
          <view class="gui-margin-top">
            <text class="gui-text gui-color-gray">选择尺寸</text>
          </view>
          <view class="gui-margin-top">
            <gui-stags :tags="sizes" @change="sizeChange"></gui-stags>
          </view>
          <view class="gui-margin-top">
            <text class="gui-text gui-color-gray">购买数量</text>
          </view>
          <view class="gui-margin-top">
            <gui-step-box :value="1" @change="numberChange"></gui-step-box>
          </view>
        </scroll-view>
        <!-- 底部按钮栏 -->
        <view class="gui-flex gui-row gui-space-between gui-align-items-center gui-border-t gui-padding">


          <view class="gui-footer-large-buttons gui-flex1 gui-flex gui-row gui-nowrap gui-justify-content-end">

            <view class="gui-footer-large-button gui-bg-orange" style="border-radius:50rpx;" hover-class="gui-tap"
              @tap="buynow">
              <text class="gui-text gui-text-center gui-block gui-color-white gui-footer-large-button-text">联系服务</text>
            </view>
          </view>
        </view>
        <gui-iphone-bottom></gui-iphone-bottom>
      </view>


      <view style="height:120rpx;"></view>
    </template>
  </gui-page>
</template>
<script>
  var face =
    "/static/images/daxi.jpg";
  var img =
    "/static/images/daxi.jpg";
  export default {
    data() {
      return {
        // 轮播图 
        swiperItems: [],
        // 商品信息
        product: {
          name: "小米 MIX3 一面科技 一面艺术 ( 磁动力滑盖全面屏 | 故宫特别版 )",
          logo: "../../static/logo.png",
          price: 3188,
          priceMarket: 3200,
          imgs: [
            '/static/images/xq.png',
            '/static/images/xq2.jpg'
          ]
        },
        // 切换导航
        navItems: [{
          id: 0,
          name: '商品详情'
        }, {
          id: 1,
          name: '相关评论'
        }],
        // 切换索引
        active: 0,
        // 属性选择
        attrShow: false,
        colors: [{
            id: 1,
            text: "红色",
            checked: false
          },
          {
            id: 2,
            text: "黑色",
            checked: false
          },
          {
            id: 3,
            text: "蓝色",
            checked: false
          }
        ],
        sizes: [{
            id: 1,
            text: "10 cm",
            checked: false
          },
          {
            id: 2,
            text: "20 cm",
            checked: false
          },
          {
            id: 3,
            text: "40 cm",
            checked: false
          }
        ],
        // 属性记录
        attrRes: {
          color: null,
          size: null,
          number: 1
        },

        product_id: '',
        shop_id: '',
        shopInfo: {},
        productInfo: {},
        user_id: '',

      }
    },
    onLoad(e) {
      if (e.id) {
        this.product_id = e.id;
        this.initData()
      }

      var user = uni.gRequest.checkLogin();

      if (user) {
        this.user_id = user.user_id
      }
    },
    methods: {
      initData() {
        // console.log('11111',this.product_id)
        var self = this;

        // 产品接口
        uni.gRequest.get('product/' + self.product_id).then(result => {
          // 商铺接口
          // uni.gRequest.get('shop/' + self.product_id).then(result => {

          self.product = result.data;
          // console.log('11111', result.data)
          let banner_list = result.data.banner.split(',');
          banner_list.forEach(x => {
            self.swiperItems.push({
              image: x
            })
          });
          self.product.description = decodeURIComponent(result.data.description);
        });

      },

      // 分享
      // share: function() {
      //   uni.showToast({
      //     title: '分享',
      //     icon: "none"
      //   });
      // },
      // 导航切换
      navChange: function(e) {
        this.active = e;
      },
      // 返回首页
      goHome: function() {
        uni.navigateBack()
      },
      // 点击喜欢、收藏、关注
      clickLike(flag) {
        uni.gRequest.get('product/flag', {
          user_id: this.user_id,
          product_id: this.product_id,
          shop_id: this.shop_id,
          flag: flag
        }).then(result => {
          var text = {
            "xihuan": "喜欢",
            "shoucang": "收藏",
            "guanzhu": "关注"
          };

          if (result.data.flag == "1") {
            uni.showToast({
              title: "已添加到" + text[flag],
              icon: "none"
            });
          } else {
            uni.showToast({
              title: "已取消" + text[flag],
              icon: "none"
            });
          }

        });
      },
      // 加入购物车
      addtocard: function() {
        // 选择属性
        this.selectAttr();
      },
      // 购买 
      buynow: function() {
        uni.gRequest.get('dict/get/information', {
          key: 'service.phone'
        }).then(result => {
          uni.showModal({
            title: '联系客服',
            content: result.msg,
            showCancel: true,
            cancelText: '取消',
            confirmText: '呼叫',
            success: res => {
              if (res.confirm) {
                uni.makePhoneCall({
                  phoneNumber: res.content
                })
              }

            },
            fail: () => {},
            complete: () => {}
          });
        });


      },
      // 属性选择
      selectAttr: function() {
        // 未选择属性弹出选择
        if (!this.attrShow) {
          this.attrShow = true;
          return;
        }
        // 已选择属性进行订单提交
        // 属性在 attrRes 变量内保存
        if (this.attrRes.color == null || this.attrRes.size == null) {
          uni.showToast({
            icon: "none",
            title: "请选择属性"
          });
        }
        console.log('请完善提交代码');
      },
      colorChange: function(e) {
        this.attrRes.color = e.text;
      },
      sizeChange: function(e) {
        this.attrRes.size = e.text;
      },
      numberChange: function(e) {
        this.attrRes.number = e[0];
      },
      closeAttr: function() {
        this.attrShow = false;
      },
      goshopInfo() {
        uni.navigateTo({
          url: '/pages/shop/details?id=' + this.shop_id
        })
      }
    }
  }
</script>
<style scoped>
  .product-name {
    width: 560rpx;
    line-height: 50rpx;
  }

  .product-share {
    width: 80rpx;
    height: 80rpx;
    text-align: center;
    font-size: 50rpx;
    color: #FF7900;
    line-height: 80rpx;
  }

  .product-price {
    color: #FF7900;
    line-height: 60rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .gui-common-line {
    height: 18rpx;
  }

  .product-footer {
    position: fixed;
    z-index: 99;
    left: 0;
    bottom: 0;
    width: 750rpx;
  }

  .product-attr {
    width: 700rpx;
    margin: 25rpx;
    height: 580rpx;
  }

  .gui-padding {
    padding: 20rpx 25rpx;
  }

  .gui-footer-icon-buttons {
    width: 100rpx;
  }


  /* 卡片视图 */
  .gui-card-view {
    padding: 25rpx;
    margin: 0 30rpx;
    margin-top: 30rpx;
  }

  .gui-card-body {
    padding-bottom: 30rpx;
  }

  .gui-card-img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 80rpx;
  }

  .gui-card-desc {
    width: 400rpx;
    margin-left: 25rpx;
    flex: 1;
  }

  .gui-card-name {
    font-size: 28rpx;
    line-height: 40rpx;
    margin-right: 20rpx;
  }

  .gui-card-text {
    line-height: 40rpx;
    font-size: 24rpx;
  }

  .gui-card-footer {
    margin-top: 25rpx;
  }

  .gui-card-footer-item {
    width: 100rpx;
    text-align: center;
    flex: 1;
    line-height: 38rpx;
    font-size: 26rpx;
  }

  /* #ifndef APP-NVUE */
  .gui-card-footer-item {
    display: block;
  }

  .gui-box-shadow {
    box-shadow: 0px 0px 3rpx #999999;
  }

  /* #endif */
</style>
